<!-- components/CustomSwitch.vue -->
<template>
  <div
    class="custom-switch"
    :class="{ 'is-checked': modelValue }"
    @click="toggle"
    role="switch"
    :aria-checked="modelValue"
  >
    <div class="switch-track">
      <div class="switch-thumb"></div>
    </div>
  </div>
</template>

<script setup>
import { computed, defineProps, defineEmits } from "vue"

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  activeColor: {
    type: String,
    default: "linear-gradient(135deg, #a43aff 0%, #ff3f81 100%)",
  },
  inactiveColor: {
    type: String,
    default: "#000000",
  },
  width: {
    type: [Number, String],
    default: 40,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(["update:modelValue"])

const toggle = () => {
  if (!props.disabled) {
    emit("update:modelValue", !props.modelValue)
  }
}

// 计算属性处理宽度
const switchWidth = computed(() => {
  return typeof props.width === "number" ? `${props.width}px` : props.width
})
</script>

<style scoped>
.custom-switch {
  display: inline-flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  user-select: none;
  outline: none;
}

.switch-track {
  position: relative;
  width: 44px; /* 默认宽度 */
  height: 22px;
  border-radius: 10px;
  background: var(--inactive-color, #dcdfe6);
  transition: background 0.3s ease;
  overflow: hidden;
}

.switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 0.3s ease;
  transform: translateX(0);
}

.is-checked .switch-track {
  background: var(
    --active-color,
    linear-gradient(135deg, #a43aff 0%, #ff3f81 100%)
  );
}

.is-checked .switch-thumb {
  transform: translateX(22px);
}

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>
